import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/shopping_car/models/xin_he_goods_model.dart';
import 'package:xin_he/utils/xh_styles.dart';
import 'package:xin_he/utils/xin_he_image.dart';

import '../../../../routes/xin_he_routes.dart';
import 'xin_he_group_purchase_alert_logic.dart';

class XinHeGroupPurchaseAlertPage extends StatelessWidget {
  XinHeGroupPurchaseAlertPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGroupPurchaseAlertLogic());
  final state = Get.find<XinHeGroupPurchaseAlertLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          height: 395,
          width: Get.width-41*2,
          decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: Column(children: [


            Padding(
              padding: const EdgeInsets.only(top: 15),
              child: Row(children: [
                Text('参与张三三的拼单',style: TextStyle(color: XinHeColor('#2C2C2C'),fontWeight: FontWeight.w500,fontSize: 14),),
                Spacer(),
                GestureDetector(
                  onTap: (){
                    Get.back();
                  },
                  child: Container(
                      height: 20,
                      width: 20,
                      alignment: Alignment.centerRight,
                      child: const XinHeAssetImage('assets/images/home/close_12.png',width: 12,height: 12,)),
                ),
              ],),
            ),

            ///头像列表
            Container(
              height: 52,
              width: Get.width,
              margin: const EdgeInsets.only(top: 30),
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              child: GridView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.symmetric(horizontal: 0),
                scrollDirection: Axis.horizontal,
                gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 1,
                    mainAxisSpacing: 15,
                    childAspectRatio: 52/40
                ),
                itemBuilder: (ctx,index){
                  return GestureDetector(
                    onTap: (){
                      Get.toNamed(XinHeRoutes.goodsDetail);
                    },
                    child: _avatarItemView(),
                  );
                },
                itemCount: 4,
              ),
            ),


            const SizedBox(height: 19,),
            ///商品信息
            _goodsItemView(XinHeGoodsModel(), 0),

            SizedBox(height: 10,),
            Row(children: [
              Text('选择数量',style: TextStyle(color: XinHeColor('#2C2C2C'),fontSize:14 ,fontWeight:FontWeight.w500 ),),
              Spacer(),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  GestureDetector(
                    onTap: (){
                      // logic.handleItemCount(index, false);
                    },
                    child: Container(
                      height: 23,
                      width: 23,
                      alignment: Alignment.center,
                      margin: const EdgeInsets.only(left: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.5),
                          border: Border.all(color: XinHeColor('#E9EFF0'),width: 0.5)
                      ),
                      child: Text('—',style: TextStyle(color:XinHeColor('#8B9191'),fontSize: 12,fontWeight: FontWeight.w500),
                      ),
                    ),
                  ),

                  Container(
                    height: 23,
                    margin: const EdgeInsets.only(left: 3),
                    padding: const EdgeInsets.symmetric(horizontal: 6),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.white

                    ),
                    child: Text('3',style: TextStyle(color:XinHeColor('#8B9191'),fontSize: 12,fontWeight: FontWeight.w500),
                    ),
                  ),

                  GestureDetector(
                    onTap: (){
                      // logic.handleItemCount(index, true);
                    },
                    child: Container(
                      height: 23,
                      width: 23,
                      margin: const EdgeInsets.only(left: 3),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.5),
                          color:XinHeColor('#30E9E9'),
                          // border: Border.all(color: XinHeColor('#30E9E9'),width: 0.5)
                      ),
                      child: const Text('+',style: TextStyle(color:Colors.white,fontSize: 12,fontWeight: FontWeight.w500),
                      ),
                    ),
                  ),


                ],)
            ],),

            const SizedBox(height: 20,),
            ///选择地址
            GestureDetector(
              onTap: (){
                Get.toNamed(XinHeRoutes.addressManagement);

              },
              child: Container(
                color: Colors.transparent,
                child: Row(children: [

                  const XinHeAssetImage('assets/images/cart/pay_location.png',width: 15,height: 19,),
                  const SizedBox(width: 5,),
                  Text('选择地址',style: TextStyle(color: XinHeColor('#333333'),fontSize: 14,fontWeight: FontWeight.w500),),
                  const Spacer(),
                  const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
                ],),
              ),
            ),

            Container(
              height: 35,
              width: 160,
              margin: EdgeInsets.only(top: 40),
              alignment: Alignment.center,
              decoration: BoxDecoration(color: XinHeStyle.mainGreenColor,borderRadius: BorderRadius.circular(17.5)),
              child: Text('立即支付',style: TextStyle(color: XinHeColor('#FFFCF9'),fontSize: 17,fontWeight: FontWeight.w500),),
            )


          ],),
        )
    );
  }

  Widget _avatarItemView(){

    return Stack(children: [
      Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20)),
        child:  XinHeAssetImage('assets/images/home/question_icon.png',width: 40,height: 40,),
      ),
      Positioned(
          top: 35,
          child: Container(
            height: 17,
            width: 40,
            alignment: Alignment.center,
            decoration: BoxDecoration(color: XinHeColor('#E33F3F'),borderRadius: BorderRadius.circular(8.5)),
            child: Text('团长',style: TextStyle(color: Colors.white,fontSize:11,fontWeight: FontWeight.w500 ),),
          ))
    ],);
  }


  Widget _goodsItemView(XinHeGoodsModel model,int index){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-41*2,
          height: 80,

          child:  Row(
            children: [

              const Padding(
                padding:  EdgeInsets.only(left: 0,top: 0,right: 15,bottom: 10),
                child: XinHeAssetImage('assets/images/home/tmp.png',width: 70,height: 70,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-41*2-80-30-15,
                      child: Text('一级冷榨有机野山茶籽油500ML级冷榨有机野iii',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 10,),



                  SizedBox(
                    width:Get.width-41*2-80-30-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        // const Spacer(),


                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),


      ],
    );
  }

}
